Around

Mobile & Tablet Responsive Template

• created: 03/09/2015
• latest update: 03/09/2015
• by: Enabled

How do I install the item?

Copy and paste all the items in the code folder to your server to your desired location. 

What are those i class"fa " things?

That is Font Awesome, the amazing icons we used for this item you can learn more about them and find a cheatsheet on how to use them here http://fortawesome.github.io/Font-Awesome/icons/

How do I change the contact form information?

There is only one PHP file in the item, please open that item and replace the email address with yours. 

<ul class="menu-top">
    <li class="active-menu"><a href="#"><i class="fa fa-home"></i>Homepage<i class="fa fa-circle"></i></a></li>
    <li>
        <a class="has-submenu" href="#"><i class="fa fa-cog"></i>Features<i class="fa fa-plus active-plus"></i></a>
        <ul class="submenu show-submenu">
            <li class="active-menu"><a href="#"><i class="fa fa-angle-right"></i>Type Features<i class="fa fa-circle"></i></a></li>
            <li><a href="#"><i class="fa fa-angle-right"></i>jQuery Features<i class="fa fa-circle"></i></a></li>
            <li><a href="#"><i class="fa fa-angle-right"></i>Other Features<i class="fa fa-circle"></i></a></li>
        </ul>
    </li>
</ul>

Line 1 opens the menu wrapper

Line 2 is a simple menu, no dropdown, and it is selected. You can make it unselected / selected by adding or removing the active-menu class

Line 3 creates a dropdown menu. 

Line 4 is the menu item with the plus icon to the right. Adding the class active-plus to the fa will make the plus rotate and simulate an open menu.

Line 5 opens the submenu. Having the show-submenu class added to it makes the submenu opened. 

Line 6, 7, and 8 are simple menu items added inside the dropdown. You can make them selected by adding the class active-menu. 

Line 9 closes the submenu

LIne 10 closes the main submenu item

Line 11 closes the entire menu. 

<div class="header">
    <a href="index.html" class="header-logo"></a>
    <a href="#" class="header-navigation show-navigation"><i class="fa fa-navicon"></i></a>
</div>

<div class="header-clear-big"></div>

The header is composed of the logo on the left side and the menu hamburger icon on the right side. To change the logo open style.css and locate line 234. Replace the image there with your own and also replace the width, height and background size. To maintain a clean clear aspect for retina / high dpi screens the logo should be double the size of the width, height and background size set. For example, a logo that's 100 x 100 size, the width and height should be 50 px and the background size should be 50px 50px. 

The header-clear and header-clear-big classes are used to make space under the fixed header. 

header-clear - 60px size, will make the content appear right under the header. This is good for slider pages.

header-clear-big  - 90px size. Will make a space between the header and content. This is good for content pages.

<div class="slider-container full-bottom">
    <div class="homepage-slider" data-snap-ignore="true">                
        <div>
            <div class="overlay"></div>
            <div class="homepage-slider-caption homepage-left-caption">
                <h3>Swipe me!</h3>
                <p>Hope you enjoy our latest item!</p>
            </div>
            <img src="images/pictures/3.jpg" class="responsive-image" alt="img">
        </div>
    </div>
</div>

To create more slides simply duplicate lines 3 to 10 and replace the image and text with yours. The caption text can be left right or center and can be achieved by replacing homepage-SIDE-caption side with left center or right. 

    <p class="thumb-left no-bottom">
        <img src="images/pictures/1s.jpg" alt="img">
        <strong>Mobile app feel </strong>
        <em><br>Lorem Ipsum is simply dummy text of the printing and typeset. </em>
    </p>
    <div class="thumb-clear"></div>

Line 1 creates the container for the thumbnail with image to the left. The class must be thumb-left.

Line 2 is the icon on the left side

Line 3 is the title of the icon

Line 4 is the closing container for the thumbnail column

Line 5 clears the flotation of the columns.
 

To create a right thumbnail, simply replace thumb-left with thumb-right and follow the exact same structure as above. 

<div class="container">
    <a href="#" class="next-staff"></a>
    <a href="#" class="prev-staff"></a>
    <div class="staff-slider" data-snap-ignore="true">
        <div><!--Duplicate Me-->
            <div class="staff-item">
                <img src="images/pictures/1s.jpg" alt="img">
                <h4>John Doe</h4>
                <em>Web Designer</em>
                <strong>We love quotes, and sometimes it's</strong>
                <a href="#" class="button button-red center-button">Call</a>
            </div>
        </div>
    </div>
</div> 

To create more slides, simply duplicate the class that has the <!--Duplicate Me--> comment.

After doing so, replace the image and text with your own, and you have a new slide

    <div class="quote-slider full-bottom">
        <div>
            <h4>
                Great all around product, with some of the best documentation I have ever seen. Really thorough and easy to follow! 
                Also the support responsiveness is really fantastic. Extremely happy with everything. Thanks!
            </h4>
            <a href="#">ChrisPizzoDesign - ThemeForest</a>
        </div>
    </div>

Duplicate the inner div to create a new quote message. 

        <div class="content-heading">
            <h4>Featured Project</h4>
            <p>Check and enjoy our featured item</p>
            <i class="fa fa-star-o"></i>
            <div class="overlay"></div>
            <img src="images/pictures/7w.jpg" alt="img">
        </div>

You can replace the image, the icon, and the text to better describe your section.  When using a content-heading class you should place it ouside the content class to maintain fullwidth. Open the content class again after adding a content-heading,

Please check the second documentation to better understand the functions of content and container classes used in this template

<!-- Page Footer-->
<div class="footer">
    <div class="footer-socials half-bottom">
        <a href="#" class="footer-facebook"><i class="fa fa-facebook"></i></a>
        <a href="#" class="footer-twitter"><i class="fa fa-twitter"></i></a>
        <a href="#" class="footer-google"><i class="fa fa-google-plus"></i></a>
        <a href="#" class="footer-share show-share-bottom"><i class="fa fa-share-alt"></i></a>
        <a href="#" class="footer-up"><i class="fa fa-angle-up"></i></a>
    </div>
    <p class="center-text">Copyright 2015. All rights reserved.</p>
</div>

Copy and paste the structure above to generate the footer. Adding show-share-bottom will create the button that opens the share box at the bottom. This is explaned in the second docuemntation. 

No! We have 2 documentations. This one explained the main features of the template, and it's structure. The second documentation describes the features from each indivudual page. 

If there is anything you don't understand, please send us a message http://enableds.com/html-support/ through our support page and we will gladly assist you with absolutely anything that's related to the template! We take great pride in providing top notch support to all our customers! 

Please don't forget to rate 5 stars!